<template>
    <main class="flex flex-col justify-center items-center select-none">
        <div
            class="w-516px h-56px mt-48px mb-24px bg-#EFF4FC rounded-12px flex items-center justify-evenly gap-5px py-1px px-3px cursor-pointer"
        >
            <div
                v-for="(v, i) in tabs"
                :key="i"
                class="switch-button"
                :class="{ active: appStore.tabActive == i }"
                @click="appStore.setTabActive(i)"
            >
                {{ v }}
            </div>
        </div>
        <div class="w-526px bg-#FF9A23 rounded-12px p-32px flex flex-col gap-16px text-white">
            <SwapWiget v-if="appStore.tabActive == 0" />
            <LiquidityWiget v-else-if="appStore.tabActive == 1" />
            <ReferralWiget v-else />
        </div>
        <CommonFooter />
    </main>
    <SelectToken />
</template>

<script setup>
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const tabs = ['Swap', 'Liquidity', 'Referral']
</script>

<style scoped>
.switch-button {
    @apply: w-164px h-48px rounded-10px flex justify-center items-center text-orange text-14px font-500;
}
.active {
    @apply: bg-white shadow-md;
}
</style>
